<template>
  <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart"></div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "Echart",
  props: {
    className: {
      type: String,
      default: "yourClassName"
    },
    id: {
      type: String,
      default: "yourID"
    },
    width: {
      type: String,
      default: "500px"
    },
    height: {
      type: String,
      default: "500px"
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.myEchart,'light');
      // 把配置和数据放这里
      this.chart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ["product", "总量", "今日量"],
          source: [
            {
              product: "访问量",
              "总量": 30,
              "今日量": 20
            },
            {
              product: "成交量",
              "总量": 60,
              "今日量": 20
            },
            {
              product: "订单",
              "总量": 100,
              "今日量": 30
            }
          ]
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [{ type: "bar" }, { type: "bar" }]
      });
    }
  }
};
</script>